import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Spin, Upload, Modal } from 'antd';
import EditPage from '@/components/EditPage';
import DetailPage from '@/components/DetailPage';
import {
  queryDictData,
  formItemFragement,
  queryDict,
  queryPerson,
  queryFileList,
} from '@/utils/common';
import { allDictList } from '@/utils/constans';
import { checkSuffix } from '@/pages/Common/common';
import {
  selectDeclareDetailAndInfo,
  renderTableAdSelect,
  allDispatchType,
  renderTableAdSearch,
} from './utils';
import GoodsInfo from './GoodsInfo';
import ContainerInfo from './ContainerInfo';

@connect(({ declare, loading, component }) => ({
  detailsDelivery: declare.detailsDelivery,

  mdsDelivery:declare.mdsDelivery,
  dictObject: component.dictObject,
  loading: loading.effects[allDispatchType.detailsDeliveryPlus],
}))
export default class DeclareInfoDetail extends Component {
  state = {
    // detailId: '',
    previewVisible: false,
    previewImage: '',
    fileList: [],
  };
  componentWillMount() {
    // 查询字典项
    const allDict = [
      allDictList.manifest_current,
      allDictList.package_category,
      allDictList.manifest_pay,
      allDictList.manifest_goods,
    ];
    queryDict({ props: this.props, allDict });
  }

  componentDidMount() {
    const { detailId } = this.props;
    if (!detailId) return;
    // this.queryFileList(detailId);
    selectDeclareDetailAndInfo({
      type: allDispatchType.detailsDeliveryPlus,
      payload: { id: detailId },
      props: this.props,
    });
  }
  queryFileList = id => {
    queryFileList({
      props: this.props,
      params: { bizId: id, fileBizType: 'OIL_MANA' },
      callback: data => {
        if (!data) return;
        this.setState({ fileList: data });
      },
    });
  };

  handleStateChange = (options = []) => {
    options.map(item => {
      this.setState(item);
    });
  };
  formatfileList = fileList => {
    let _fileList = [];
    if (Array.isArray(fileList) && fileList.length > 0) {
      _fileList = fileList.map(file => {
        return {
          uid: file.id,
          name: file.fileUrl
            ? file.fileUrl.substring(file.fileUrl.lastIndexOf('\\') + 1, file.fileUrl.length)
            : '',
          status: 'done',
          url: `/server/api/tms/tms-attachment/readFile?path=${
            file.fileUrl
          }&token=${localStorage.getItem('token')}`,
          id: file.id,
        };
      });
    }
    // console.log('_fileList', _fileList);
    return _fileList;
  };
  handlePreview = file => {
    const checkFile = checkSuffix(file.name);
    if (file.name && !checkFile) {
      window.open(file.url);
      return;
    }
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  };
  handleCancel = e => {
    this.setState({
      previewVisible: false,
    });
  };

  render() {
    const { loading, mdsDelivery, detailId, type } = this.props;
    const { fileList } = this.state;
    const detail = mdsDelivery[detailId] || {};
    const editPageParams = {
      panelTitle: ['基本信息', '商品项信息', '集装箱信息'],
    };

    const formItem = [
      [
        <DetailPage label="提(运)单号" value={detail.deliveryNo} />,
        <DetailPage
          label="运输条款"
          value={renderTableAdSelect({
            props: this.props,
            value: detail.transportTermsCode,
            key: allDictList.manifest_pay,
            declare: true,
          })}
        />,
      ],
      [
        <DetailPage
          label="运费支付"
          value={renderTableAdSelect({
            props: this.props,
            value: detail.payMethodCode,
            key: allDictList.manifest_pay,
            declare: true,
          })}
        />,
        <DetailPage
          label="海关货物通关"
          value={renderTableAdSelect({
            props: this.props,
            value: detail.goodsItemCode,
            key: allDictList.manifest_goods,
            declare: true,
          })}
        />,
      ],
      [
        <DetailPage label="跨境指运地" value={detail.crossTransport} />,
        <DetailPage label="货物总件数" value={detail.goodsTotal} />,
      ],
      [
        <DetailPage
          label="包装种类"
          value={renderTableAdSelect({
            props: this.props,
            value: detail.packageCategoryCode,
            key: allDictList.package_category,
            declare: true,
          })}
        />,
        <DetailPage label="货物体积(M3)" value={detail.goodsVolume} />,
      ],
      [
        <DetailPage label="货物总毛重(KG)" value={detail.goodsGrossWeith} />,
        <DetailPage
          label="货物价值"
          value={
            detail.goodsCost && detail.goodsCost !== 0 ? Number(detail.goodsCost).toFixed(2) : 0
          }
        />,
      ],
      [
        <DetailPage
          label="金额类型"
          value={renderTableAdSelect({
            props: this.props,
            value: detail.currentCode,
            key: allDictList.manifest_current,
            declare: true,
          })}
        />,
        <DetailPage label="拆箱人代码" value={detail.unboxBy} />,
      ],
      // [
      //   <DetailPage label="途径国家或地区" value={detail.price} />,
      //   <DetailPage label="通知人信息" value={detail.totalFee} />,
      // ],
      [
        <DetailPage label="发货人" value={detail.consignor} />,
        <DetailPage label="收货人" value={detail.consignee} />,
      ],
      // [<DetailPage label="危险品联系人信息" value={detail.price} />],
      [<DetailPage label="备注" value={detail.remarks} />],
    ];

    return (
      <div>
        <EditPage {...editPageParams}>
          <Spin spinning={loading}>{formItemFragement(formItem)}</Spin>
          <Fragment>
            <GoodsInfo detailId={detailId} mode="detail" />
          </Fragment>
          <Fragment>
            <ContainerInfo detailId={detailId} mode="detail" />
          </Fragment>
        </EditPage>
      </div>
    );
  }
}
